<template>
  <div style="padding-bottom: 50px;">
    <div class="menu"></div>
    <van-nav-bar
      title="教学安排周报"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div style="background-color: #F3F3F3;height: 73px;">
      <van-row type="flex" justify="space-around" style="height: 24px;line-height: 24px;">
        <van-col v-for="item in ['日','一','二','三','四','五','六']" :key="item">{{ item }}</van-col>
      </van-row>
      <div style="background-color: #F3F3F3; height: 55px;line-height: 49px;">
        <van-row type="flex" justify="space-around">
          <div @click="calendarClick(item)" :class="item.isSelected ? 'calendar-item-select' : ''" class="calendar-item" v-for="(item, value) in this.$data.currentWeekDays" :key="value">
            <div class="calendar__top-info">{{item.isToday ? "今天" : ""}}</div>
            <div class="calendar__middle-info">{{ item.day }}</div>
            <div v-if="item.hasEvent" class="calendar__bottom-info">·</div>
          </div>
        </van-row>
      </div>
    </div>
    <!-- 事件组件数据传递 -->
    <EvDayTask :datas="subData" style="margin-top: 6px;" @itemClick="itemClick"></EvDayTask>
    <PageChangeControl class="page-control" style="margin-top: 20px;" preText="上一周" currText="本周" nextText="下一周"  @pre="pre()" @current="current()" @next="next()"></PageChangeControl>
    <van-dialog v-model="show" :showConfirmButton=false>
      <div class="dialog-content">
        <span class="title-span">查看详情</span>
        <div class="line-item-sper"></div>
        <van-row class="van-row-item" type="flex">
          <van-col class="van-col-left">时间</van-col>
          <van-col  class="van-col-rightc-content">上午8:45-上午9:00</van-col>
        </van-row>
        <van-row class="van-row-item" type="flex">
          <van-col class="van-col-left">班级</van-col>
          <van-col class="van-col-rightc-content">青春普陀训练140人（班级1） </van-col>
        </van-row>
        <van-row class="van-row-item" type="flex">
          <van-col class="van-col-left">地点</van-col>
          <van-col class="van-col-rightc-content">青春普陀训练140人（班级1） </van-col>
        </van-row>
        <van-row class="van-row-item" type="flex">
          <van-col class="van-col-left">内容</van-col>
          <van-col class="van-col-rightc-content">张老师</van-col>
        </van-row>
        <van-row class="van-row-item" type="flex">
          <van-col class="van-col-left">授课人</van-col>
          <van-col class="van-col-rightc-content">张老师</van-col>
        </van-row>
        <van-row class="van-row-item" type="flex">
          <van-col class="van-col-left">备注</van-col>
          <van-col class="van-col-rightc-content">无</van-col>
        </van-row>
        <van-button plain hairline type="info" @click="closeDialog()" class="close-button">关闭</van-button>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import PageChangeControl from './PageChangeControl.vue'
import EvDayTask from './EvDayTask.vue'
import moment from 'moment'
export default {
  created() {
    this.$data.role = this.$route.query.role;
  },
  mounted() {
    let date = new Date()
    let year = date.getFullYear();
    let month = date.getMonth();
    var weekday = date.getDay() || 7;
    date.setDate(date.getDate() - weekday);
    console.log('------:' + date.day)
    this.rightTitle = year + '年' + (month + 1) + '月'
    this.current()
  },
  data() {
    let year = new Date().getFullYear();
    let month = new Date().getMonth();
    var lists = []
    for(var i = 0; i < 4; i++) {
      var obj = {titles:i % 2 == 0 ? ['三楼报告厅 “不忘初心、牢'] : ['三楼报告厅 “不忘初心、牢','三楼报告厅 “不忘初心、牢','三楼报告厅 “不忘初心、牢','三楼报告厅 “不忘初心、牢']}
      var amobj = {amOrPm:i % 2 == 0, obj:obj}
      var pmobj = {amOrPm:false, obj:obj}
      var mobjs = i % 2 == 0 ? {mobj:[amobj, pmobj], class:'测试' + i} : {mobj:[pmobj], class:'测试' + i}
      lists.push(mobjs)
    }
    return {
      index: 0,
      list: [1,2,3,4,5,6],
      role: -1,
      currentWeekDays:[],
      selectedItemIndex: -1,
      lastWeeks: 0,
      nextWeeks: 0,
      subData:{list:lists},
      show:false,
      eventObj:{'title':'dddd'}
    };
  },
  methods: {
    formatter(day) {
      const year = day.date.getFullYear()
      const month = day.date.getMonth();
      const date_day = day.date.getDate();
      let date = new Date()
      let tyear = date.getFullYear();
      let tmonth = date.getMonth();
      var today = date.getDate()
      if (month === tmonth && month === tmonth) {
        if (date_day === today) {
          day.topInfo = '今天'
          day.bottomInfo = '·'
        }
      }
      return day
    },
    onClickLeft() {
      this.$router.push({path:'/home',query:{role:this.$data.role}})
    },
    pre() {
      var count = 1
      if(this.nextWeeks > 0) {
        this.nextWeeks--
        count = this.nextWeeks * -1
      } else {
        this.lastWeeks++
        count = this.lastWeeks
      }
      var week = this.getLastWeek(count)
      this.weekDays(week[0])
      this.list = [1,2]
    },
    current() {
      this.nextWeeks = 0
      this.lastWeeks = 0
      this.list = [1,2,4,5,6]
      var week = this.getCurrentWeek()
      this.weekDays(week[0])
    },
    next() {
      var count = 1
      if(this.lastWeeks > 0) {
        this.lastWeeks--
        count = this.lastWeeks * -1
      } else {
        this.nextWeeks++
        count = this.nextWeeks
      }
      var week = this.getNextWeek(count)
      this.weekDays(week[0])
      this.list = [1]
    },
    calendarSelect(singleDate) {
      console.log(singleDate)
    },
    weekDays(stTime) {
      this.currentWeekDays = []
      for(var i = 0;i < 7; i++) {
        /// 一周中每一天的日期
        var time = moment(stTime).add(i,'days')
        var isToday = time.isSame(moment(), 'day')
        if(isToday) {
          this.selectedItemIndex = i
        }
        var obj = {
          day: time.date(),
          date: time.format('YYYY-MM-DD'),
          isToday: isToday,
          hasEvent: i % 2 == 0,
          isSelected: isToday
        }
        this.currentWeekDays.push(obj)
      }
      console.log(this.currentWeekDays, this.selectedItemIndex)
    },
    getCurrentWeek() {
      const start = moment().weekday(0).format('YYYY-MM-DD'); //本周日
      const end = moment().weekday(6).format('YYYY-MM-DD'); //本周六
      return [start, end]
    },
    getLastWeek(i) {
      let last_monday = moment().week(moment().week() - i).startOf('week').format('YYYY-MM-DD')
      let last_sunday = moment().week(moment().week() - i).endOf('week').format('YYYY-MM-DD')
      console.log('getLastWeek' + last_monday, last_sunday)
      return [last_monday, last_sunday]
    },
    getNextWeek(i) {
      let next_monday = moment().week(moment().week() + i).startOf('week').format('YYYY-MM-DD')
      let next_sunday = moment().week(moment().week() + i).endOf('week').format('YYYY-MM-DD')
      console.log('getNextWeek' + next_monday, next_sunday)
      return [next_monday, next_sunday]
    },
    calendarClick(val) {
      /// 重置上一个选中的item
      this.currentWeekDays[this.selectedItemIndex].isSelected = false
      /// 设置单当前选中
      val.isSelected = true
      var index = this.currentWeekDays.indexOf(val)
      this.selectedItemIndex = index
      /// 赋值刷新界面
      this.currentWeekDays[index] = val
      console.log('item clicked' + this.currentWeekDays.indexOf(val), 'val: ' + val.date)
    },
    itemClick(val) {/// 日历项点击事件带回的数据
      this.show = true
    },
    closeDialog() {
      this.show = false
    }
  },
  components:{
    PageChangeControl,
    EvDayTask
  }
}
</script>

<style>
  .calendar {
    margin-top: 0px;
    width: 100%;
    height: 100%;
  }
  .calendar-item {
    width: 49px;
    height: 49px;
    font-size: 14px;
    /* line-height: 49px; */
    cursor: pointer;
  }
  .calendar-item-select {
    background-color: #3E7EFF;
  }
  .calendar__top-info {
    position: relative;
    width: 49px;
    height: 10px;
    top: 1px;
    font-size: 10px;
    line-height: 0.37333rem;
  }
  .calendar__middle-info {
    position: relative;
    width: 49px;
    height: 14px;
    top: 8px;
    line-height: 14px;
  }
  .calendar__bottom-info {
    position: relative;
    width: 49px;
    top: 5px;
    height: 10px;
    font-size: 0.26667rem;
    line-height: 20px;
    color: #FF3E3E;
    font-size: 56px;
  }
  .van-calendar__month-title {
    display: none;
  }
  .van-tabs__nav--line {
    background-color: #F3F3F3;
  }
  .van-calendar__bottom-info {
    font-size: 40px;
    color: red;
    bottom: 10px;
  }
  .van-calendar__selected-day {
    background-color: #3E7EFF;
  }
  .page-control {
    left: 0;
    position: fixed;
    bottom: 0;
    width: 100%;
  }
  .close-button {
    margin-bottom: 10px;
    margin-top: 10px;
    background-color: #FFFFFF;
    width: 113px;
    height: 33px;
  }
  .title-span {
    display: inline-block;
    margin-left: 25px;
    margin-right: 16px;
    margin-top: 16px;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
    line-height: 24px;
    width: 100%;
  }
  .title-span::before {
    content:'';
    position: fixed;
    top: 20px;
    bottom: 0;
    left: 16px;
    width: 4px;
    height: 16px;
    z-index: -1;
    background: #3E7EFF;
  }
  .van-row-item {
    margin-left: 16px;
    margin-right: 16px;
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .van-col-left {
    width: 50px;
    height: 20px;
    text-align: left;
    font-size: 12px;
    font-weight: 200;
    color: #A1A1A1;
  }
  .van-col-rightc-content {
    font-size: 12px;
    color: #1D1D1D;
    font-weight: 300;
  }
  .line-item-sper {
    height: 1px;
    margin-left: 16px;
    margin-right: 16px;
    flex: 1;
    background-color: #F3F3F3;
    margin-top: 10px;
    margin-bottom: 10px;
  }
</style>
